<template>
  <div class="template-opetate">
    <h4>展示字段({{`${checkArr.length}/${showFieldNum()}`}})</h4>
    <el-input
      class="search-box"
      placeholder="请输入关键字搜索"
      prefix-icon="el-icon-search"
      v-model="searchVal"
      @input="handleSearch"> 
    </el-input>
    <div class="template-opetate-checkbox__list">
      <el-checkbox-group v-model="checkArr">
        <el-checkbox
          @change="checkboxHandle"
          v-for="item in sysDisplayFieldCheckMapNative"
          :key="item.key"
          :label="item.key"
          :disabled="!item.canCancel"
        >{{item.value}}
        </el-checkbox>
      </el-checkbox-group>
    </div>
  </div>
</template>

<script>
import _ from 'lodash'
export default {
  // 非智能报告的系统消息模版操作区域
  name:'sys-template-operate',

  data() {
    return {
      searchVal: '',
      sysDisplayFieldCheckMapDefault: [],
      sysDisplayFieldCheckMapNative: []
    }
  },

  props:{

    // 所有的展示字段列表
    sysDisplayFieldCheckMap:{
      type:Array,
      required:true
    },

    // 需要展示的字段
    value:{
      type:Array,
      required:true
    },
  },

  computed:{
    checkArr:{
      get(){
        return this.value;
      },
      set(val){
        this.$emit('input', val)
      }
    }
  },

  watch: {
    sysDisplayFieldCheckMap: {
      handler: function(n){ 
        this.sysDisplayFieldCheckMapDefault = _.cloneDeep(n)
        this.sysDisplayFieldCheckMapNative = n
       },
      deep: true,
      immediate: true
    }
  },

  methods:{
    checkboxHandle(flag){
      if(flag && this.checkArr.length >= 6){
        this.checkArr = this.checkArr
        this.$message.warning('最多选择6个字段');
      }
    },

    showFieldNum(){
      const len = this.sysDisplayFieldCheckMap.length
      return `${len > 6 ? 6 : len}`
    },

    handleSearch: _.debounce(function(e){
      this.sysDisplayFieldCheckMapNative = this.sysDisplayFieldCheckMapDefault.filter(item=>   item.value.includes(e))
    }, 200) 
  }
}
</script>


<style lang="scss" scoped>
.template-opetate{
    max-height: 310px;
    overflow-y: auto;
  h4{
    margin-bottom:6px;
    font-size: 14px;
    color: #262626;
    line-height: 22px;
  }
  .el-checkbox{
    display: flex;
    align-items: center;
    line-height:22px;
    margin-bottom:6px;
    ::v-deep .el-checkbox__label {
      width: 240px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .show-content{
    .el-checkbox{
      display: inline-block;
      margin-bottom:0;
    }
  }
  .search-box{
    max-width: 310px;
    height:32px;
    margin-bottom:10px;
  }
  /* .template-opetate-checkbox__list{
      max-height: 250px;
      overflow-y: auto;
  } */

}
</style>



